<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>admin</title>

    
    <link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="themes/demo.css">
    <link rel="stylesheet" type="text/css" href="themes/icon.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
    
    <style>
        h2{color: darkblue;font-size: 30px;padding-left:10px }
        p{color: darkblue;font-size: 15px;padding-left:10px }
        .come div{width: 280px;height:290px;border: 1px solid lightgrey;float: left;margin: 2%;position: relative;box-shadow: 3px 3px 10px lightgray }
        .come p{margin-left: 8%;margin-top: 20px;}
        .come div div{width:110px;height:110px;border-radius: 50%;position: absolute;left:65px;top:35px;box-shadow: 5px 5px 30px lightslategray}
        .come div em{color: black;font-weight: bolder;font-size: 15px;font-style: normal;position: absolute;left:92px;top:165px;display: block;width: 100px;text-align: center}
        .come div i{color:lightgray;font-weight: bolder;font-size: 12px;font-style: normal;position: absolute;left:92px;top:185px;display: block;width: 100px;text-align: center}

        .hc{background: url('img/hc.png') no-repeat;background-size: 100% 100%}
        .summer{background: url('img/summer.png') no-repeat;background-size: 100% 100%}
        .lyg{background: url('https://gitee.com/uploads/7/1753907_langyaoguang.png?1516957200') no-repeat;
             background-size: 100% 100%}
        .yiji{background: url('https://gitee.com/uploads/10/1753910_ZhangYiJi.png?1516953189') no-repeat;
             background-size: 100% 100%}
        .voilt{background: url('https://gitee.com/uploads/55/1754155_Wig.png') no-repeat;background-size: 100% 100%}
        .come div span{display: block;height:13%;width:100%;border-top: 1px solid lightgrey ;background: rgb(206, 231, 248);        bottom: 0;position: absolute}
        .come div span a{display: block;color: rgb(43, 42, 42);font-size: 14px;font-weight: bold;margin:10px 20px }
        .come div span a:nth-of-type(1){float: left}
        .come div span a:nth-of-type(2){float: right}
        .come div:nth-of-type(1){margin-left:8%;}
        .come div:nth-of-type(4){margin-left:22%;}
    </style>
</head>
<body>
    
    <div id="cc" class="easyui-layout"data-options='fit:true'>
    		<div data-options="region:'north'" style="padding-top:10px;height:105px">
    			<h2>颜值爆表 Admin</h2>
    			<p>Background to the adoption of the system management system for managersto customers fast and accurate response</p>
    		</div>
        <div title="DetailTree" style="width:240px;" data-options="
                region:'west',
                split:true,
                collapsed:true,
                hideExpandTool: true,
                expandMode: null,
                hideCollapsedContent: false,
                collapsedSize: 68,
                collapsedContent: function(){return $('#titlebar');}" >
                <div class="easyui-accordion" data-options='fit:true'>
                    <!--<div title="User" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">
                        <h3 style="color:#0099FF;">Accordion for jQuery</h3>
                        <p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>
                    </div>
                    <div title="Products" data-options="iconCls:'icon-help'" style="padding:10px;">
                        <p>The accordion allows you to provide multiple panels and display one or more at a time. Each panel has built-in support for expanding and collapsing. Clicking on a panel header to expand or collapse that panel body. The panel content can be loaded via ajax by specifying a 'href' property. Users can define a panel to be selected. If it is not specified, then the first panel is taken by default.</p>         
                    </div>
                    <div title="News" data-options="iconCls:'icon-search'" style="padding:10px;">
                        <ul class="easyui-tree">
                            <li>
                                <span>国际新闻</span>
                            </li>
                        </ul>
                    </div>-->
                    <!--<div title="Comments" data-options="iconCls:'icon-help'" style="padding:10px;">
                        <p>The accordion allows you to provide multiple panels and display one or more at a time. Each panel has built-in support for expanding and collapsing. Clicking on a panel header to expand or collapse that panel body. The panel content can be loaded via ajax by specifying a 'href' property. Users can define a panel to be selected. If it is not specified, then the first panel is taken by default.</p>         
                    </div>-->
                </div>
            </div>

        <div data-options="region:'center',title:'Main Content'" class="main-content">
                <div id="tt" class="easyui-tabs" data-options="fit:true">
                        <div title="welcome" class="come">
                            <p>后台管理人员</p>
                            <div><div class="hc"></div><em> 花茶世家</em><i>-user-</i><span><a>contributes:</a><a>1190</a></span></div>     
                            <div><div class="lyg"></div><em> langyaoguang</em><i>-backend-</i><span><a>contributes:</a><a>1450</a></span></div>     
                            <div><div class="yiji"></div><em> 张一吉</em><i>-news-</i><span><a>contributes:</a><a>1320</a></span></div>     
                            <div><div class='summer'></div><em> summ.ER</em><i>-comment-</i><span><a>contributes:</a><a>1240</a></span></div>     
                            <div><div class="voilt"></div><em> Voilt</em><i>-index-</i><span><a>contributes:</a><a>1160</a></span></div>
                        </div>
                </div>
        </div>
    </div>
    <div id="titlebar" style="padding:2px">
        <a href="javascript:void(0)" class="easyui-linkbutton" style="width:100%" data-options="iconCls:'layout-button-right'" onclick="$('#cc').layout('expand','west')" data-link="temp/layout-1.html"></a>
        <a href="javascript:void(0)" class="easyui-linkbutton" style="width:100%" data-options="iconCls:'icon-large-picture',size:'large',iconAlign:'top'" data-link="html/user.html">User</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" style="width:100%" data-options="iconCls:'icon-large-shapes',size:'large',iconAlign:'top'" data-link="html/product.html">Products</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" style="width:100%" data-options="iconCls:'icon-large-smartart',size:'large',iconAlign:'top'" data-link="html/news.html">News</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" style="width:100%" data-options="iconCls:'icon-large-chart',size:'large',iconAlign:'top'" data-link="html/classify.html">Classify</a>
    </div>



    <script type="text/javascript">
      	$(function () {
			$('#titlebar a').bind('click', function () {
                var title = $(this).text();
                var url = $(this).attr('data-link');
                if(title.length>2){
                     addTab(title, url);   
                    }
				
			})

			function addTab(title, href) {
                
				var tabPanel = $("#tt");
				if (!tabPanel.tabs('exists', title)) {
                    var content = '<iframe style="width:100%;height:100%" frameborder="0" src="' + href + '"></iframe>';
					tabPanel.tabs('add', {
						title: title,
						content: content,
						fit: true,
						closable: true
					})
				}else{
                    var content = '<iframe style="width:100%;height:100%" frameborder="0" src="' + href + '"></iframe>';
                    $('#tt').tabs('select', title);
                    $('#tt').tabs('select', content);
               
                }
			}
		})
    </script>
</body>
</html>